<template>
  <div class="earlyWarningStatistics-root">
    <formTitleVue
      title="预警统计"
      :selectOptions="selectOptions"
      @selectChange="selectChange"
    />
    <!-- <div id="echarts-types"></div> -->
    <myPieRingLinearColor domId="overview-earlyWarningStatistics-echarts" height="30vh" :chartsData="chartsData" :myOption="echartsOption"/>
  </div>
</template>

<script>
import formTitleVue from "@/components/FormTitle/formTitle.vue";
import myPieRingLinearColor from '@/components/Echarts/myPieRingLinearColor.vue';
import { time_select_optios } from '@/utils/global.js';
import { waringStatistics } from '@/api/alarm/statistics'
export default {
  name: "earlyWarningStatistics",
  components: {
    formTitleVue,myPieRingLinearColor,
  },
  data() {
    return {
      selectOptions: [
        {
          selectValue: "近一月",
          options:[
            { label: "近一月", value: "近一月" },
            { label: "近半年", value: "近半年" },
            { label: "近一年", value: "近一年" },
          ]
        }
      ],
      chartsData: {

        yData: []
      },
      echartsOption:{

      },
      searChForm: {
        startTime: '',
        endTime: '',

      },
    };
  },
  methods: {
    selectChange(item) {
      // console.log(item);
      this.searChForm.startTime = time_select_optios[item].startTime
      this.searChForm.endTime = time_select_optios[item].endTime
      this.getData();
    },
    getData(){
      let params ={
        startTime:this.searChForm.startTime+" 00:00:00",
        endTime:this.searChForm.endTime+" 23:59:59",
        areaCode:this.$store.state.account.user.deptIds
      }
      waringStatistics(params).then(r=>{
        let res = r.data.report
        this.chartsData.yData = [
          {
            name:"预警统计",
            radius: ["60%", "80%"],
            center: ["30%", "50%"],
            data: res
          }
        ]
        let total = 0
        this.chartsData.yData.forEach(item => {
          item.data.forEach(item => {
            item.label = {
              normal:{
                show: false,
                formatter: "{b} {d}%",
              }
            }
            total += item.value
          })
        })
        this.echartsOption = {
          title:{
            text: total,
            left: "29%",
            top: "38%",
            // textVerticalAlign:'top',
            textAlign:'center',
            textStyle: {
              color: "#4293f6",
              fontSize: this.$commonJs.adjustSize(37),
              fontWeight: '500',
            },
            subtext: '总数',
            subtextStyle: {
              verticalAlign:'top',
              color: "#333333",
              fontSize: this.$commonJs.adjustSize(26),
              // fontWeight: '600',
            },
          },
          legend:{
            orient: 'vertical',
            top: 'middle',
            right: '10%',
            itemGap: this.$commonJs.adjustSize(10),
            // formatter: 'Legend {name}',
            // 使用回调函数
            formatter: function (name) {
              for(let item2 of res){
                if(item2.name == name){
                  // let p
                  // if(total == 0 || !item2.value){
                  //   p = 0
                  // }else{
                  //   p = (item2.value/total*100).toFixed(2)
                  // }
                  return `{name|${name}} {count|总数 ${item2.value}}`
                }
              }
            },
            textStyle:{
              rich: {
                name: {
                  fontSize: this.$commonJs.adjustSize(16),
                  width: this.$commonJs.adjustSize(70),
                  // padding: [10, 40, 10, 10],
                },
                count:{
                  color: '#83878b',
                  fontSize: this.$commonJs.adjustSize(16),
                  width: this.$commonJs.adjustSize(20),
                  // padding: [10, 10, 10, 10],
                },
              }
            },
          },
        }
      })
    },
  },
  mounted() {
    this.selectChange("近一月");
  },
};
</script>

<style lang="scss" scoped>
.earlyWarningStatistics-root {
  background-color: white;
  padding: 8px 12px;
  width: 50%;
  #echarts-types {
    height: 30vh;
  }
}
</style>
